import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { SubmitBar, Checkbox, ProductCard, Tag, Button, Toast, NavBar, Radio, Skeleton } from 'react-vant';
import { getCarList, removeCar, selectCar, selectCarAll, upDataCar } from '../../api';
import './car.scss'

export default function Car() {
  let [carList, setCarList] = useState([])
  let { userId } = useSelector(state => state.user)
  let [loading, setLoading] = useState(true)
  let navigate = useNavigate()
  let [aa, setAa] = useState(true)
  let [selectAll, setSelectAll] = useState(false)

  useEffect(() => {
    getCarList({ userid: userId })
      .then(res => {
        console.log(res);
        setCarList(res.data.data)
        setLoading(false)
      })
      .catch(error => {
        console.log(error)
        setLoading(false)
      })
  }, [aa])

  const total = carList ? carList.reduce((sum, item) => {
    if (item.flag) {
      const itemTotal = item.originprice * item.num;
      return sum + itemTotal;
    }
    return sum;
  }, 0) : 0;

  const jia = (a) => {
    upDataCar({ cartid: a.cartid, num: a.num + 1 }).then(res => {
      console.log(res, 4);
      setAa(!aa)
    })
  }

  const jian = (a) => {
    upDataCar({ cartid: a.cartid, num: a.num - 1 }).then(res => {
      console.log(res, 3);
      setAa(!aa)
    })
  }

  const del = (c) => {
    removeCar({ cartid: c.cartid }).then(res => {
      console.log(res, 23);
      setAa(!aa)

    })
  }

  const toggleItemChecked = (b) => {
    // const newList = [...carList];
    // newList[index].checked = !newList[index].checked;
    // setCarList(newList);
    selectCar({ cartid: b.cartid, flag: !b.flag }).then(res => {
      console.log(res, 1);
      setSelectAll(carList.every(item => item.flag));
      setAa(!aa)

    })

  }

  const toggleSelectAll = () => {
    // const newList = carList.map(item => ({ ...item, checked: !selectAll }));
    // setCarList(newList);
    // setSelectAll(!selectAll);
    selectCarAll({ userid: userId, type: !selectAll }).then(res => {
      console.log(res, 2);
      setSelectAll(!selectAll)
      setAa(!aa)

    })
  }

  return (
    <div>
      <NavBar
        title={`购物车(${carList?.length ? carList?.length : 0})`}
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />

      {loading && <Skeleton className="demo-loading" />}
      {console.log(carList?.length)}
      {!loading && carList && carList?.length > 0 &&
        carList.map((item) => {
          return <ProductCard
            key={item.cartid}
            price={item.originprice}
            title={
              <>
                {item.proname}
                <Button size="mini" round plain onClick={() => del(item)}>删除</Button>
              </>

            }
            thumb={
              <>
                <Checkbox checked={item.flag} onChange={() => toggleItemChecked(item)} />
                <img src={item.img1} alt="" />
              </>
            }
            footer={
              <>
                <Button size="mini" round plain style={{ marginRight: 2 }} onClick={() => jian(item)}>
                  -
                </Button>
                {item.num}
                <Button size="mini" round plain onClick={() => jia(item)}>
                  +
                </Button>
              </>
            }
          />
        })
      }

      {!loading && (!carList || carList.length === 0) && <p>空</p>}

      <div className="demo-submit-bar">
        <SubmitBar
          price={total * 100}
          buttonText="提交订单"
        >
          <Checkbox checked={selectAll} onChange={toggleSelectAll}>全选</Checkbox>
        </SubmitBar>
      </div>
    </div>
  )
}